<template>
	<van-popup
		v-model:show="innerShow"
		position="bottom"
		:style="{ height: '45vh', background: '#f5f6f9' }"
		round
	>
		<div class="popup-title-row">
			<span class="popup-title">{{ $t('extra.title', '额外需求') }}</span>
			<span class="popup-sub">{{ $t('extra.sub', '可多选') }}</span>
		</div>
		<div class="extra-card">
			<van-checkbox-group v-model="checkedList">
				<div v-for="item in options" :key="item" class="extra-item">
					<span class="extra-label">{{
						$t('extra.' + item, item)
					}}</span>
					<van-checkbox :name="item" class="extra-checkbox" />
				</div>
			</van-checkbox-group>
		</div>
		<div class="popup-footer">
			<van-button type="primary" block round @click="confirm">{{
				$t('extra.confirm', '确定')
			}}</van-button>
		</div>
	</van-popup>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue'

const props = defineProps<{ show: boolean; modelValue: string[] }>()
const emit = defineEmits(['update:show', 'update:modelValue'])

const innerShow = ref(props.show)
watch(
	() => props.show,
	(val) => (innerShow.value = val)
)
watch(innerShow, (val) => emit('update:show', val))

const options = [
	'需要布线',
	'需要拆除旧设备',
	'需要打孔',
	'需要接油机',
	'需要配件适配',
]
const checkedList = ref<string[]>(props.modelValue || [])
watch(
	() => props.modelValue,
	(val) => (checkedList.value = val)
)

function confirm() {
	emit('update:modelValue', checkedList.value)
	emit('update:show', false)
}
</script>

<style scoped>
.popup-title-row {
	display: flex;
	align-items: center;
	padding: 18px 10px 0 10px;
	background: #f5f6f9;
}
.popup-title {
	font-size: 16px;
	font-weight: 600;
	color: #000;
	margin-right: 12px;
}
.popup-sub {
	font-size: 12px;
	color: #7d7d7d;
	font-weight: 600;
}
.extra-card {
	background: #fff;
	border-radius: 15px;
	margin: 18px 10px 0 10px;
	padding: 18px 0 18px 0;
}
.extra-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10px;
	margin-bottom: 18px;
	font-size: 16px;
	font-weight: 600;
}
.extra-item:last-child {
	margin-bottom: 0;
}
.extra-label {
	color: #000;
	font-size: 16px;
	font-weight: 600;
}
.extra-checkbox {
	margin-left: 12px;
}
.popup-footer {
	padding: 18px 16px 16px 16px;
}
</style>

export default { // ... existing code ... }
